
  <link rel="stylesheet" href="/styles/bootstrap.css">
  <style>
    div.panel-primary {
      width: 600px;
      margin: 50px auto 0;
    }
  </style>


<div class="container">
  <table class="table table-bordered text-center">
    <caption>用户管理</caption>
    <thead>
    <tr>
      <th>用户</th>
      <th>密码</th>
      <th>电话</th>
      <th>收货地址</th>
      <th>余额</th>
      <th>个性签名</th>
      <th>操作</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody id="tbody">
    </tbody>
  </table>
</div>

  <div class="modal" id="edit" role="dialog" aria-labelledby="mySmallModalLabel"
       aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span
              aria-hidden="true">&times;</span><span class="sr-only">Close</span>
          </button>
          <h4 class="modal-title">请修改数据</h4>
        </div>
        <div class="modal-body">
          <div class="panel panel-primary">
            <div class="panel-body">
              <form class="form-horizontal" role="form" enctype="multipart/form-data" id="form1">
                <div class="form-group has-feedback">
                  <label class="col-sm-3 control-label" for="title1">用户：</label>
                  <div class="col-sm-9">
                    <input type="hidden" id="id1" name="id">
                    <input type="text" class="form-control" name="username" id="username"
                            >
                  </div>
                </div>
                <div class="form-group has-feedback">
                  <label class="col-sm-3 control-label" for="jianjie1">密码：</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" name="pwd" id="pwd">
                  </div>
                </div>
                <div class="form-group has-feedback">
                  <label class="col-sm-3 control-label" for="money1">电话：</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" name="phone" id="phone"
                            >
                  </div>
                </div>
                <div class="form-group has-feedback">
                  <label class="col-sm-3 control-label" for="money1">收货地址：</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" name="where" id="where"
                           >
                  </div>
                </div>
                <div class="form-group has-feedback">
                  <label class="col-sm-3 control-label" for="money1">余额：</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" name="qian" id="qian"
                           >
                  </div>
                </div>
                <div class="form-group has-feedback">
                  <label class="col-sm-3 control-label" for="money1">个性签名：</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" name="speek" id="speek"
                           >
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-3 col-sm-offset-3">
                    <button class="btn btn-default submit">修改</button>
                  </div>
                  <div class="col-sm-6">
                    <button type="reset" class="btn btn-default reset">重置</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>
<script src="/js/jquery-2.1.3.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>

<script>
  function show() {
    $('#tbody').empty();
    $.getJSON('/manage/get_user', function (data) {
      $.each(data.arr, function () {
        $('#tbody').append("<tr data-idsrc='" + this.id + '&' +'bb' +  "'><td>" + this.username + "</td><td>"
          + this.pwd + "</td>" +
          "<td>" + this.phone + "</td>" +
          "<td>" + this.where + "</td>" +
          "<td>" + this.qian + "</td>" +
          "<td>" + this.speek + "</td>" +
          "<td><button class='del'>删除</button></td><td>" +
          "<button class='edit' data-toggle='modal'" +
          " data-target='#edit'>编辑</button></td></tr>")
      })
    });
  }
  show()



  $('#tbody').on('click', 'button', function () {
    var clsn = this.className;
    var idsrc = $(this).closest('tr').data('idsrc');
    var id = idsrc.split('&')[0];
    if (clsn == 'del') {
      if (confirm('你确定要删除吗')) {
        $.getJSON('/manage/dele?id=' + id , function (flag) {
          if(flag==1)alert('删除成功');
          show()
        })
      }
    }

    else {
      $.getJSON('/manage/get_onee?id=' + id, function (row) {
        $('#id1').val(row.id);
        $('#username').val(row.username);
        $('#pwd').val(row.pwd);
        $('#phone').val(row.phone);
        $('#where').val(row.where);
        $('#qian').val(row.qian);
        $('#speek').val(row.speek);
      })
    }


  })



  $('#form1').submit(function (e) {
    e.preventDefault();
    $.post('/manage/gaiy', $('#form1').serialize(), function (flag) {
      console.log(flag);
      switch (flag) {
        case 1:
          alert('修改成功');
          show();
          break;
      }
    },'json')

  })

</script>


</html>
